<template>
    <div class="tr">
        <div class="tr-top">
            <div class="left">
                <div class="itm"><el-button @click="addEv">新增</el-button></div>
            </div>
            <div class="right">
                <div class="itm"> <el-input clearable v-model="tableObjData.label__like" style="width: 240px" placeholder="输入名称" />
                </div>
                <div class="itm"> <el-input clearable v-model="tableObjData.label__like" style="width: 240px" placeholder="输入字典" />
                </div>
                <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
            </div>
        </div>
        <div class="table-content">
            <el-table empty-text="暂无数据" border height="100%" :data="tableListData">
                <el-table-column align="center" type="index" label="#" width="50" />
                <el-table-column align="center" header-align="center" prop="value" label="参数" width="150" />
                <el-table-column align="center" header-align="center" prop="label" label="参数值" width="150" />
                <el-table-column align="center" header-align="center" prop="dict_value" label="字典" width="150" />
                <el-table-column align="center" header-align="center" prop="dict_name" label="字典名称" width="150" />

                <el-table-column align="center" header-align="center" prop="sort" label="排序" width="100" />
                <el-table-column align="center" header-align="center" prop="rem1" label="备注" width="150" />
                <el-table-column align="center" header-align="center" prop="create_time" label="创建时间" width="180" />
                <el-table-column align="center" header-align="center" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="updateSelRowEv(scope.row)">
                            修改
                        </el-button>
                        <el-popconfirm placement="left-end" width="220" confirm-button-text="删除" cancel-button-text="取消"
                            icon-color="#626AEF" confirm-button-type="text" title="是否确认永久是删除此数据"
                            @confirm="deleteSelRowEv(scope.row)">
                            <template #reference>
                                <el-button link type="primary" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
      v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />
        <!-- 新增和修改数据 -->
        <el-dialog v-model="dialogVisible" :title="isAdd == true ? '新增' : '修改'" width="400" :before-close="handleClose">
            <div>
                <div class="dialog-content">
                    <div class="left">字典</div>
                    <div class="right"><el-input @change="$forceUpdate()" v-model="editData.dict_value"
                            style="width: 240px" placeholder="" /></div>
                </div>
                <div class="dialog-content">
                    <div class="left">参数</div>
                    <div class="right"><el-input @change="$forceUpdate()" v-model="editData.label" style="width: 240px"
                            placeholder="" /></div>
                </div>
                <div class="dialog-content">
                    <div class="left">参数值</div>
                    <div class="right"><el-input @input="handleInput" @change="$forceUpdate()" v-model="editData.value" style="width: 240px"
                            placeholder="" /></div>
                </div>
                <div class="dialog-content">
                    <div class="left">排序</div>
                    <div class="right"><el-input-number @change="$forceUpdate()" v-model="editData.sort"
                            style="width: 240px" />
                    </div>
                </div>
                <div class="dialog-content">
                    <div class="left">备注</div>
                    <div class="right"><el-input type="textarea" :rows="1" @change="$forceUpdate()"
                            v-model="editData.rem1" style="width: 240px" placeholder="" /></div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogSuerEv()">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { DictDataListGet, DictDataListPost, DictDataPkGet, DictDataPkPut, DictDataPkDelete } from '@/api/setting/dict/index.js'
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loadingStore } from '@/stores/index.js'

const loading = loadingStore()
let tableListData = ref([])
let isAdd = ref(true)
let dialogVisible = ref(false)
let tableObjData = reactive({
    label__like: '',
    page: 1,
    total: 0,
    has_next: false,
    has_prev: false,
    pages: 0,
    pageSize: 20
})
let editData = reactive({
    sort: 10
})
onMounted(() => {
    getEv(false)
})
onActivated(() => {

})

const handleInput = (value) =>{
    const regex = /[^a-zA-Z0-9]/g;
    editData.value = value.replace(regex, "");
}

const addEv = () => {
    dialogVisible.value = true
    isAdd.value = true
}
// 查询数据
const getEv = async (msg) => {
    loading.loading = true
    try {
        let arr_data = await DictDataListGet(tableObjData)
        if (arr_data.status != 200) {
            return
        }
        if (msg == true) {
            ElMessage.success('查询成功')
        }
        tableListData.value = arr_data.data.result.data
        tableObjData.total = arr_data.data.result.total
        tableObjData.has_next = arr_data.data.result.has_next
        tableObjData.has_prev = arr_data.data.result.has_prev
        tableObjData.pages = arr_data.data.result.pages
        tableObjData.pageSize = arr_data.data.result.pageSize

    } catch (error) {
        ElMessage.error('查询接口请求失败' + error)
    } finally {
    loading.loading = false
  }
}
// 修改数据
const updateSelRowEv = async (row) => {
    loading.loading = true
    try {
        let arr_data = await DictDataPkGet(row.id)
        if (arr_data.status != 200) {
            return
        }
        isAdd.value = false
        dialogVisible.value = true
        editData.id = arr_data.data.result.id
        editData.label = arr_data.data.result.label
        editData.value = arr_data.data.result.value
        editData.dict_value = arr_data.data.result.dict_value
        editData.dict_name = arr_data.data.result.dict_name
        editData.rem1 = arr_data.data.result.rem1
        editData.sort = arr_data.data.result.sort
    } catch (error) {
        ElMessage.error('获取单个数据接口请求失败' + error)
    } finally {
    loading.loading = false
  }
}
// 修改数据
const updateRowEv = async () => {
    loading.loading = true
    try {
        let arr_data = await DictDataPkPut(editData, editData.id)
        if (arr_data.status != 200) {
            return
        }
        await getEv(false)
        ElMessage.success('修改成功')
    } catch (error) {
        ElMessage.error('修改接口请求失败' + error)
    } finally {
    loading.loading = false
  }
}

// 新增数据
const addDataEv = async () => {
    loading.loading = true

    try {
        if ('id' in editData) {
            delete editData.id
        }
        let arr_data = await DictDataListPost(editData)
        if (arr_data.status != 200) {
            return
        }
        await getEv(false)
        ElMessage.success('新增成功')
    } catch (error) {
        ElMessage.error('新增接口请求失败' + error)
    } finally {
    loading.loading = false
  }
}

// 删除数据
const deleteSelRowEv = async (row) => {
    loading.loading = true

    try {
        let arr_data = await DictDataPkDelete(row.id)
        if (arr_data.status != 200) {
            return
        }
        await getEv(false)
        ElMessage.success('删除成功')
    } catch (error) {
        ElMessage.error('删除接口请求失败' + error)
    } finally {
    loading.loading = false
  }
}
// 关闭出发事件
const handleClose = (done) => {
    isAdd.value = true
    editData.id = ''
    editData.label = ''
    editData.value = ''
    editData.dict_value = ''
    editData.dict_name = ''
    editData.rem1 = ''
    editData.sort = 0
    done()
}
// 弹窗确认事件
const dialogSuerEv = async () => {
    if (isAdd.value == true) {
        console.log('新增数据')
        await addDataEv()
    } else {
        console.log('修改数据')
        await updateRowEv()
    }
    dialogVisible.value = false
    isAdd.value = true
    editData.id = ''
    editData.label = ''
    editData.value = ''
    editData.dict = ''
    editData.dict_name = ''
    editData.rem1 = ''
    editData.sort = 0
}

</script>

<style lang='less' scoped>

.tr {
    height: 100%;
}

.tr-top {
    height: var(--tr-top-height);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right {
        display: flex;
        align-items: center;
    }

    .itm {
        padding-right: 4px;
        box-sizing: border-box;
    }
}

.table-content {
    height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}

.dialog-content {
    display: flex;
    align-items: center;
    height: 40px;

    .left {
        width: 60px;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }
}
</style>